<template>
	<view class="about-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">关于我们</text>
			</view>
			<view class="header-right"></view>
		</view>

		<!-- 应用信息 -->
		<view class="app-info">
			<view class="app-logo">
				<image src="/static/login.png" class="logo-image"></image>
			</view>
			<view class="app-details">
				<text class="app-name">智能直播课堂</text>
				<text class="app-version">版本 {{ appVersion }}</text>
				<text class="app-slogan">让学习更智能，让教育更高效</text>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="feature-list">
			<view class="feature-item" v-for="(feature, index) in features" :key="index">
				<view class="feature-icon">
					<uni-icons :type="feature.icon" size="24" color="#007AFF"></uni-icons>
				</view>
				<view class="feature-content">
					<text class="feature-title">{{ feature.title }}</text>
					<text class="feature-desc">{{ feature.desc }}</text>
				</view>
			</view>
		</view>

		<!-- 联系信息 -->
		<view class="contact-section">
			<view class="section-title">联系我们</view>
			<view class="contact-list">
				<view class="contact-item" v-for="(contact, index) in contacts" :key="index" @tap="handleContact(contact)">
					<view class="contact-left">
						<uni-icons :type="contact.icon" size="20" color="#666"></uni-icons>
						<text class="contact-text">{{ contact.name }}</text>
					</view>
					<view class="contact-right">
						<text class="contact-value">{{ contact.value }}</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他信息 -->
		<view class="other-info">
			<view class="info-item" v-for="(info, index) in otherInfo" :key="index" @tap="handleInfo(info)">
				<view class="info-left">
					<uni-icons :type="info.icon" size="20" color="#666"></uni-icons>
					<text class="info-text">{{ info.name }}</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 版权信息 -->
		<view class="copyright">
			<text class="copyright-text">© 2024 智能直播课堂</text>
			<text class="copyright-desc">让学习更智能，让教育更高效</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	// 应用信息
	const appVersion = ref('1.0.0');

	// 功能特色
	const features = ref([
		{
			icon: 'videocam',
			title: '智能直播',
			desc: '高清直播，实时互动，让课堂更生动'
		},
		{
			icon: 'chat',
			title: '班级管理',
			desc: '便捷的班级管理，高效的教学协作'
		},
		{
			icon: 'paperplane',
			title: '作业系统',
			desc: '智能作业管理，学习进度跟踪'
		},
		{
			icon: 'calendar',
			title: '课程安排',
			desc: '灵活的课程安排，个性化学习计划'
		},
		{
			icon: 'eye',
			title: '学习分析',
			desc: '数据驱动的学习分析，精准教学建议'
		}
	]);

	// 联系信息
	const contacts = ref([
		{
			icon: 'phone',
			name: '客服电话',
			value: '400-123-4567',
			type: 'phone'
		},
		{
			icon: 'email',
			name: '客服邮箱',
			value: 'support@edulive.com',
			type: 'email'
		},
		{
			icon: 'chat',
			name: '在线客服',
			value: '点击咨询',
			type: 'chat'
		},
		{
			icon: 'weixin',
			name: '微信公众号',
			value: '智能直播课堂',
			type: 'wechat'
		}
	]);

	// 其他信息
	const otherInfo = ref([
		{
			icon: 'help',
			name: '帮助中心',
			type: 'help'
		},
		{
			icon: 'info',
			name: '用户协议',
			type: 'agreement'
		},
		{
			icon: 'shield',
			name: '隐私政策',
			type: 'privacy'
		},
		{
			icon: 'star',
			name: '给我们评分',
			type: 'rate'
		}
	]);

	// 方法
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				uni.navigateTo({ url: '/pages/profile/profile' });
			}
		});
	};

	const handleContact = (contact: any) => {
		switch (contact.type) {
			case 'phone':
				uni.makePhoneCall({
					phoneNumber: contact.value,
					fail: () => {
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
				break;
			case 'email':
				// 复制邮箱到剪贴板
				uni.setClipboardData({
					data: contact.value,
					success: () => {
						uni.showToast({
							title: '邮箱已复制',
							icon: 'success'
						});
					}
				});
				break;
			case 'chat':
				uni.showToast({
					title: '正在连接客服...',
					icon: 'none'
				});
				break;
			case 'wechat':
				uni.setClipboardData({
					data: contact.value,
					success: () => {
						uni.showToast({
							title: '公众号名称已复制',
							icon: 'success'
						});
					}
				});
				break;
		}
	};

	const handleInfo = (info: any) => {
		switch (info.type) {
			case 'help':
				uni.navigateTo({
					url: '/pages/help/help'
				});
				break;
			case 'agreement':
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				});
				break;
			case 'privacy':
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				});
				break;
			case 'rate':
				// 跳转到应用商店评分
				uni.showToast({
					title: '感谢您的支持！',
					icon: 'success'
				});
				break;
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.about-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #007AFF, #5856D6);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		flex: 1;
		text-align: center;
	}

	.header-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.header-right {
		min-width: 60rpx;
	}

	/* 应用信息 */
	.app-info {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30rpx;
		margin-bottom: 20rpx;
	}

	.app-logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);
	}

	.logo-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
	}

	.app-details {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.app-name {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.app-version {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.app-slogan {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		margin-top: 10rpx;
	}

	/* 功能列表 */
	.feature-list {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.feature-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.feature-item:last-child {
		border-bottom: none;
	}

	.feature-icon {
		width: 60rpx;
		height: 60rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.feature-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.feature-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.feature-desc {
		font-size: 24rpx;
		color: #666;
	}

	/* 联系信息 */
	.contact-section {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 20rpx 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		padding: 30rpx 30rpx 20rpx;
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.contact-list {
		padding: 0 30rpx;
	}

	.contact-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.contact-item:last-child {
		border-bottom: none;
	}

	.contact-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.contact-text {
		font-size: 28rpx;
		color: #333;
	}

	.contact-right {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.contact-value {
		font-size: 26rpx;
		color: #666;
	}

	/* 其他信息 */
	.other-info {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 20rpx 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.info-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 版权信息 */
	.copyright {
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.copyright-text {
		font-size: 24rpx;
		color: #999;
	}

	.copyright-desc {
		font-size: 22rpx;
		color: #ccc;
	}
</style>





